<template>
  <div class="xtx-checkbox" @click="changeChecked">
    <i v-if="checked" class="iconfont icon-checked"></i>
    <i v-else class="iconfont icon-unchecked"></i>
    <span v-if="$slots.default"><slot /></span>
  </div>
</template>

<script>
export default {
  name: "XtxCheckbox",
  props: {
    value: { // 在Vue 2中，通常使用value作为v-model绑定的属性名
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      checked: this.value, // 初始化时从props.value获取值
    };
  },
  methods: {
    changeChecked() {
      this.checked = !this.checked;
      this.$emit('input', this.checked); // 在Vue 2中，v-model的更新依赖于input事件
      this.$emit('change', this.checked); // 可以同时触发额外的change事件
    }
  },
  watch: {
    // 监听props.value的改变，以支持从外部更新组件状态
    value(newVal) {
      this.checked = newVal;
    },
    // 同时，当内部checked状态改变时，确保能反映到外部v-model绑定的变量上
    checked(newVal) {
      this.$emit('input', newVal);
    }
  }
}
</script>
<style scoped lang="less">
.xtx-checkbox {
  display: inline-block;
  margin-right: 2px;
  .icon-checked {
    color: @xtxColor;
    ~ span {
      color: @xtxColor;
    }
  }
  i {
    position: relative;
    top: 1px;
  }
  span {
    margin-left: 2px;
  }
}
</style>